<!-- 秒杀管理页面 -->
<template>
	<!-- 头部 -->
	<view class="header header-position" v-if="seckill_goods.length > 0">
		<text>封面图</text>
		<text>标题</text>
		<text>操作</text>
	</view>
	<view style="height: 90rpx;"></view>

	<!-- 上传的秒杀等 -->  
	<view class="header content-list position" v-for="(item,index) in seckill_goods" :key="index">
		<image :src="item.cover" mode="aspectFill"></image>
		<text>{{item.title}}</text>
		<text class="operation" @click="delSeckill(item._id,index)">删除</text>
		<view :class="[item.seckill_time.end_Time>= new Date().getTime() ? '' : 'overdue-img']"></view>
	</view>

	<!-- 没有数据的提示 -->
	<view class="tips" v-if="seckill_goods.length == 0">你还没有秒杀数据</view>

	<!-- 弹窗 -->
	<page-container :show="show" position="bottom" @click="onEnter" @clickoverlay="show = false">
		<view class="space-view">
			<!-- 头部 -->
			<view class="popup-title popup-padding">
				<image src="/static/images/close.svg" mode="widthFix" @click="show = false"></image>
				<text>创建秒杀</text>
				<text @click="submit">提交</text>
			</view>

			<!-- 上传 -->
			<view class="upload-cover">
				<!-- 上传秒杀 -->
				<image v-if="data.seckill_cover == ''" @click="uploadImg" src="/static/images/seckill-img.jpg" mode="aspectFill"></image>
				<!-- 上传之后的秒杀图 -->
				<image :src="data.seckill_cover" mode="aspectFill"></image>
				<!-- 点击删除 -->
				<image @click="delImg" v-if="data.seckill_cover != ''" src="/static/images/delete-goods.svg" mode="widthFix"></image>
			</view>

			<!-- 标题和价格部分 -->
			<view class="seckill-input">
				<input type="text" v-model="data.seckill_title" placeholder="请输入标题" placeholder-class="input-color" cursor-spacing="50">
				<input type="number" v-model="data.seckill_price" placeholder="请输入秒杀价" placeholder-class="input-color" cursor-spacing="50">
			</view>

			<!-- 设置时间 -->
			<view class="pick-outer">
				<!-- 开始时间 -->
				<view class="pick-view underline">
					<view>
						<text>设置开始时间</text>
						<!-- 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 -->
						<picker class="flex-left" mode="multiSelector" :range="data.start_arr" :value="data.start_value" range-key="name" @columnchange="selectColumnStart" @change="changeStart">
							<view>
								<text class="pick-time">{{data.startTime}}</text>
								<image src="/static/images/right-arrow.svg" mode="widthFix"></image>
							</view>
						</picker>
					</view>
				</view>
				<!-- 结束时间 -->
				<view class="pick-view">
					<view>
						<text>设置结束时间</text>
						<picker class="flex-left" mode="multiSelector" :range="data.end_arr" :value="data.end_value" range-key="name" @columnchange="selectColumnEnd" @change="changeEnd">
							<view>
								<text :class="['pick-time',{'error-time':!data.isRight}]">{{data.endTime}}</text>
								<image src="/static/images/right-arrow.svg" mode="widthFix"></image>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<!-- 关联商品 -->
			<view class="relation relation-back" @click="addRelated">
				<text>关联商品</text>
				<text class="over-text">{{data.relatedData.title == '' ? '添加' : data.relatedData.title}}</text>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
	</page-container>


	<!-- 底部 -->
	<view style="300rpx"></view>
	<view class="bottom-button-position">
		<view class="bottom-button-style" @click="show = true">创建秒杀</view>
	</view>

</template>

<script setup>
	import { ref, onMounted, reactive, toRefs, watch } from 'vue'
	import { init } from '@/public/package-js/init.js'
	import { Upload } from '@/public/package-js/uploadImg.js'
	import { FeedBack } from "@/public/package-js/feedBack.js"
	import { onShow, onReachBottom } from '@dcloudio/uni-app' // vue3 导入 uni-app 其他生命周期API。
	// 引入传值数据
	import { related_good } from "@/public/package-js/passValue.js"
	// 引入自定义的开始和结束时间
	import { start_date, end_date } from "@/public/package-js/date.js"
	// 引入计算日期相关的 js
	import { pickerTime, calDays, calMonths } from '@/public/package-js/calculateDate.js'


	// 1、控制弹窗弹出
	const show = ref(false)

	function onEnter() {}

	// 调用引入的方法，将今年和明年的年月日填进 start_date 和 end_date
	pickerTime()

	const data = reactive({
		seckill_goods: [], //存储秒杀商品的信息
		seckill_cover: '', //封面图
		fileId: [], // 上传秒杀图片的 id
		seckill_title: '', //标题
		seckill_price: '', //秒杀价格
		startTime: '', //秒杀的开始时间（展示在输入框）
		endTime: '', //秒杀的结束时间
		relatedData: { // 用来存储关联商品的数据
			title: '', //关联的商品标题
			goods_id: '', //关联的商品id
			video_url: '', //关联的商品短视频
			original_price: '', //关联的商品原价
		},
		start_arr: start_date, // 秒杀的开始时间数组（用于展示时间选择器的列, 5列）
		end_arr: end_date, // 秒杀结束时间数组
		start_value: [0, 0, 0, 0, 0], //开始时间 value,value 的值表示选择了 range 中的第几个（下标从 0 开始）
		end_value: [0, 0, 0, 0, 0], //点击选择秒杀结束时间 value 每一项的值

		isRight: false, //判断设置的秒杀时间是否正确
		fileId: '', // 上传秒杀图片的 id
	})

	const { seckill_goods } = toRefs(data)

	onMounted(() => {
		getSeckill()
	})

	// 1、获取数据库中的秒杀数据
	async function getSeckill() {
		let db = await init()
		let res = await db.database().collection('seckill').get()
		console.log("1111",res)
		data.seckill_goods = res.data
	}

	// 2、上传封面图
	async function uploadImg() {
		const local = await new Upload().image()
		uni.showLoading({
			title: '正在上传',
			mask: true
		})
		const res = await new Upload().cloud(local[0].tempFilePath)
		data.seckill_cover = res.tempFileURL
		data.fileId = res.fileID
		uni.hideLoading()
	}

	// 3、点击删除秒杀上传的封面图
	function delImg() {
		uni.showModal({
			title: '提示',
			content: '确定删除该图片吗？',
			success: async function(res) {
				if (res.confirm) {
					uni.showLoading({
						title: '删除中',
						mask: true
					});
					// 删除云端的图片
					// 因为上传的图片 id push 进数组的最后
					await new Upload().delFile(data.fileId)

					// 删除渲染的图片
					data.seckill_cover = ''
					new FeedBack("删除成功", "success").toast()

				} else if (res.cancel) {
					new FeedBack("取消操作", "error").toast()
				}
			}
		});
	}

	// 4、滚动时间选择器的月份列，自动变化该月对应的天
	// 4-1 开始时间：滚动选择时触发，列改变触发
	function selectColumnStart(event) {
		// console.log("event",event);
		const res = event.detail // 选择列和值的下标  {column: 1, value: 1}
		// 调用重新计算方法
		reCalculate(res, data.start_arr, data.start_value, "start")
	}

	// 4-2 结束时间：滚动选择时，列改变触发
	function selectColumnEnd(event) {
		const res = event.detail
		// 调用重新计算方法
		reCalculate(res, data.end_arr, data.end_value, "end")
	}

	// 4-3 开始时间和结束时间滚动时触发的公用方法：重新计算某年某月的天数
	function reCalculate(res, dateArr, multiValueArr, type) { //res,dateArr,mult,val
		// console.log('修改的列为：' + res.column + '，值为：' + res.value)

		// multiValueArr= [0,0,0,0,0] 滚动后修改 multiValueArr 对应列的值
		// 表示选择器 选择了 range 中的第几个（下标从 0 开始）
		multiValueArr[res.column] = res.value

		switch (res.column) { // 通过判断滚动的列数
			case 0: // res.column = 0 滚动选择器选择的第 1 列:年
				switch (multiValueArr[0]) { // multiValueArr[0] = 0 / 1 ==> 0表示第一个值本年，1表示第二个值明年
					case 0: //第一列的第一个值：当前年
						dateArr[1] = calMonths(dateArr[0][0].time) //dateArr[1] 表示月份，计算出今年对应的月份进行赋值
						dateArr[2] = calDays({
							year: dateArr[0][0].time, // 将今年年份传递
							month: dateArr[1][0].time // 将本月月份传递
						}) //计算出今年本月到12月的所有月份并赋值 
						break;
					case 1: //第一列的第二个值：明年
						dateArr[1] = calMonths(dateArr[0][1].time) // 计算出明年所有的月份
						dateArr[2] = calDays({
							year: dateArr[0][1].time, // 将明年的年份进行传递
							month: dateArr[1][0].time // 月份随意传递
						})
						break;
				}

				// 选择年的时候，将后面的 月 日 时 分 进行归置为初始
				multiValueArr.splice(1, 1, 0)
				multiValueArr.splice(2, 1, 0)
				multiValueArr.splice(3, 1, 0)
				multiValueArr.splice(4, 1, 0)
				break;
			case 1: //拖动第二列：月
				dateArr[2] = calDays({ // 计算当前月的天数
					year: dateArr[0][multiValueArr[0]].time,
					month: dateArr[1][multiValueArr[1]].time
				})

				// 选择月的时候将 后面的 日 时 分 进行归置
				multiValueArr.splice(2, 1, 0)
				multiValueArr.splice(3, 1, 0)
				multiValueArr.splice(4, 1, 0)
				break;
		}

	}

	// 5、选择时间后点击确定，将选择的时间渲染到页面
	// 5-1 开始时间：确定
	function changeStart(event) {
		const res = event.detail.value
		confirm(res, 'start', data.start_arr)
	}

	// 5-2 结束时间：确定
	function changeEnd(event) {
		const res = event.detail.value
		confirm(res, 'end', data.end_arr)
	}

	// 5-3 开始时间和结束时间点击确定后渲染到页面
	function confirm(res, option, dateArr) {
		//通过 res[0, 1, 0, 0, 0] 来取选择的年月日时分
		const year = dateArr[0][res[0]].time
		const month = dateArr[1][res[1]].time
		const day = dateArr[2][res[2]].time
		const time = dateArr[3][res[3]].time
		const minute = dateArr[4][res[4]].time

		// 将获取的年月日时分进行拼接
		const selectDate = year + '/' + month + '/' + day + ' ' + time + ':' + minute + ':' + '00'
		// console.log("selectDate", selectDate);
		if (option == 'start') {
			// 开始时间
			data.startTime = selectDate
			data.start_value = res // 将选择器的value更改，这样再次重新选择会直接显示上次选择的
		} else {
			// 结束时间
			data.endTime = selectDate
			data.end_value = res
		}

	}

	// 6、监听结束时间是否小于开始时间（监听两个数据源）
	watch([() => data.startTime, () => data.endTime], (newVal, oldVal) => {
		// 当 开始和结束时间都不为空的时候操作
		if (newVal[0] != '' && newVal[1] != '') {
			// 将时间转为时间戳进行比较
			const start = new Date(newVal[0]).getTime()
			const end = new Date(newVal[1]).getTime()
			// console.log("start",start,end);

			if (start >= end) {
				data.endTime = '结束时间早于开始时间' // 代替错误选择渲染在页面上
				data.isRight = false
			} else if (start < end) {
				data.isRight = true
			}
		}
	})

	// 7、 去选择关联商品
	function addRelated() {
		// 将秒杀列表中关联的商品的 id 取出来
		const rel_id = data.seckill_goods.map(item => item.goods_id)
		// 将数组转为字符串，携带参数传递
		const str_id = JSON.stringify(rel_id)
		uni.navigateTo({
			url: '/pages/related_goods/related_goods?related_id=' + str_id
		})
	}

	// 8、 监听关联的商品
	watch(related_good, (newVal, oldVal) => {
		// 将关联的商品信息进行赋值
		data.relatedData.title = newVal.goods_title
		data.relatedData.goods_id = newVal.goods_id
		data.relatedData.video_url = newVal.video_url
		data.relatedData.original_price = newVal.goods_price
	})


	// 9 提交验证
	function submit() {
		switch (true) {
			case data.seckill_cover == '':
				new FeedBack('请上传封面图', 'error').toast();
				break;
			case data.seckill_title == '':
				new FeedBack('请输入标题', 'error').toast();
				break;
			case data.seckill_price == '':
				new FeedBack('请输入秒杀价', 'error').toast();
				break;
			case data.startTime == '' || data.endTime == '':
				new FeedBack('请设置秒杀时间', 'error').toast();
				break;
			case data.isRight == false:
				new FeedBack('结束时间早于开始时间', 'none').toast();
				break;
			case data.relatedData.goods_id == '':
				new FeedBack('请关联一个商品', 'error').toast();
				break;
			case data.seckill_price > data.relatedData.original_price:
				new FeedBack('秒杀价格高于原始价格', 'none').toast();
				break;
			default:
				commit()
				break;
		}
	}

	// 9-1 提交秒杀数据到数据库
	async function commit() {
		uni.showLoading({
			title: '正在提交',
			mask: true
		})
		// 将开始和结束时间转为时间戳
		const start_Time = new Date(data.startTime).getTime()
		const end_Time = new Date(data.endTime).getTime()

		// 组装
		let obj = {
			cover: data.seckill_cover, //封面图
			title: data.seckill_title, // 标题
			original_price: data.relatedData.original_price, //原价
			seckill_price: Number(data.seckill_price), //秒杀价
			seckill_time: {
				start_Time, //开始时间:时间戳
				end_Time // 结束时间:时间戳
			},
			goods_id: data.relatedData.goods_id, // 关联的商品id
			video_url: data.relatedData.video_url //有视频就点进去播放视频
		}

		try {
			let db = await init()
			await db.database().collection('seckill').add({
				data: obj
			})
			// 在商品数据库查询该关联商品，将秒杀字段值改为 true
			await db.database().collection('goods').doc(data.relatedData.goods_id).update({
				data: { seckill: true }
			})
			// 关闭弹窗
			show.value = false
			// 调用方法，请求数据库的秒杀数据
			getSeckill()
			new FeedBack('提交成功', 'success').toast()
			// 清空弹窗数据
			data.seckill_cover = '';
			data.seckill_title = '';
			data.seckill_price = '';
			data.startTime = '';
			data.endTime = '';
			data.relatedData.title = ''
		} catch (e) {
			new FeedBack('提交失败', "error").toast()
		}
	}

	// 10、点击删除秒杀
	async function delSeckill(id, index) {
		uni.showModal({
			title: '提示',
			content: '确定删除该秒杀吗？',
			success: async function(res) {
				if (res.confirm) {
					try {
						uni.showLoading({
							title: '删除中',
							mask: true
						});
						// 云端删除秒杀数据
						let db = await init()
						await db.database().collection('seckill').doc(id).remove()

						// 渲染的秒杀删除
						data.seckill_goods.splice(index, 1)
						new FeedBack('删除成功', 'success').toast()
					} catch (e) {
						new FeedBack('删除失败', 'error').toast()
						console.log("error", e);
					}
				} else if (res.cancel) {
					new FeedBack("取消操作", "error").toast()
				}
			}
		});
	}
</script>

<style scoped>
	.position{
		position: relative;
	}
	.position view:last-child{
		position: absolute;
	}
	.overdue-img{	
		left: 5rpx;
		top: 20rpx;
		width: 100rpx;
		height: 90rpx;
		background-image: url("https://gitee.com/Angussd/note-image/raw/master/Image/202304031327024.png");
		/* background-image: url("https://gitee.com/Angussd/note-image/raw/master/Image/202304031327329.png"); */
		background-repeat: no-repeat;
		background-size: contain;
	}
	
	.sort-table text:nth-child(2) {
		color: #333333 !important;
		background-color: initial !important;
		border-radius: 0 !important;
		padding: 0 !important;
		font-size: 30rpx !important;
	}

	.popup-padding {
		padding-bottom: 60rpx !important;
	}

	.relation-back {
		background-color: #f7f7f7 !important;
		color: #000000 !important;
	}

	.over-text {
		color: #ed6b51 !important;
	}

	.upload-cover {
		position: relative;
	}

	.upload-cover image:nth-child(1) {
		width: 100%;
		height: 380rpx;
		display: block;
	}

	.upload-cover image:nth-child(2) {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 6rpx;
		right: 6rpx;
	}

	.seckill-input input {
		padding: 20rpx;
		background-color: #f7f7f7;
		margin-top: 30rpx;
		border-radius: 7rpx;
	}

	/deep/ .input-color {
		color: #cccccc;
	}

	.pick-outer {
		background-color: #f7f7f7;
		margin-top: 30rpx;
		padding: 0 20rpx;
		border-radius: 7rpx;
	}

	/* 时间选择器样式 */
	.pick-view {
		padding: 20rpx 0;
	}

	.pick-view image {
		display: block;
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}

	.pick-view view:nth-child(1) {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex-left {
		flex: 1;
	}

	.flex-left view {
		justify-content: flex-end !important;
	}

	.underline {
		border-bottom: 1rpx solid #ededed;
	}

	.pick-time {
		font-size: 27rpx;
	}

	/* 当结束时间早于开始时间 */
	.error-time {
		color: red;
	}
</style>
